<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
  <title>台位分配</title>
  <!-- Bootstrap -->
  <link href="../assets/css/mui.min.css" rel="stylesheet">
  <link href="fonts/iconfont.css" rel="stylesheet">
  <link href="../assets/css/style.css" rel="stylesheet" />
  <link href="../assets/css/boss_content.css" rel="stylesheet" />
</head>

<body>
  <header id="header" class="mui-bar mui-bar-nav">
    <h1 class="mui-title">餐厅实况</h1>
    <button class="mui-action-back mui-btn mui-btn-blue mui-btn-link mui-btn-nav mui-pull-left">
      <span class="mui-icon mui-icon-left-nav"></span>返回</button>
      <a class="mui-pull-right headerright"><i class="icon iconfont icon-gengduo"></i></a>
    </header>
    <div class="mui-content">



    </div>
    <div class="jy_contet_list">

      <div class="jifenjilu-content">
        <div class=" mui-row ctsk-items">
          <div class="mui-col-xs-2 ry-active">马伊琍</div>
          <div class="mui-col-xs-2">马伊琍</div>
          <div class="mui-col-xs-2">马伊琍</div>
          <div class="mui-col-xs-2">马伊琍</div>
          <div class="mui-col-xs-2">马伊琍</div>
          <div class="mui-col-xs-2">马伊琍</div>
          <div class="mui-col-xs-2">马伊琍</div>
          <div class="mui-col-xs-2">马伊琍</div>
          <div class="mui-col-xs-2">马伊琍</div>
          <div class="mui-col-xs-2">马伊琍</div>
          <div class="mui-col-xs-2">马伊琍</div>
          <div class="mui-col-xs-2">马伊琍</div>
          <div class="mui-col-xs-2">马伊琍</div>
          <div class="mui-col-xs-2">马伊琍</div>
          <div class="mui-col-xs-2">马伊琍</div>


        </div>
      </div>

      <div class="coupon-list">
        <div class="kqjl-bgcolor mui-row ctsk-items2">
          <div class="mui-col-xs-3">101</div>
          <div class="mui-col-xs-3 tw-active">101</div>
          <div class="mui-col-xs-3">101</div>
          <div class="mui-col-xs-3">101</div>
          <div class="mui-col-xs-3">101</div>
          <div class="mui-col-xs-3">101</div>
          <div class="mui-col-xs-3">101</div>
          <div class="mui-col-xs-3">101</div>
          <div class="mui-col-xs-3">101</div>
          <div class="mui-col-xs-3">101</div>
          <div class="mui-col-xs-3">101</div>
          <div class="mui-col-xs-3">101</div>
          <div class="mui-col-xs-3">101</div>
          <div class="mui-col-xs-3">101</div>
          <div class="mui-col-xs-3">101</div>
          <div class="mui-col-xs-3">101</div>
          <div class="mui-col-xs-3">101</div>
          <div class="mui-col-xs-3">101</div>
          <div class="mui-col-xs-3">101</div>
          <div class="mui-col-xs-3">101</div>
           <div class="mui-col-xs-3 tw-active">101</div>
          <div class="mui-col-xs-3">101</div>
          <div class="mui-col-xs-3">101</div>
          <div class="mui-col-xs-3">101</div>
          <div class="mui-col-xs-3">101</div>
          <div class="mui-col-xs-3">101</div>
           <div class="mui-col-xs-3 active">101</div>
          <div class="mui-col-xs-3">101</div>
          <div class="mui-col-xs-3">101</div>
          <div class="mui-col-xs-3">101</div>
          <div class="mui-col-xs-3">101</div>
          <div class="mui-col-xs-3">101</div>
           <div class="mui-col-xs-3 tw-active">101</div>
          <div class="mui-col-xs-3">101</div>
          <div class="mui-col-xs-3">101</div>
          <div class="mui-col-xs-3">101</div>
          <div class="mui-col-xs-3">101</div>
          <div class="mui-col-xs-3">101</div>
           <div class="mui-col-xs-3 tw-active">101</div>
          <div class="mui-col-xs-3">101</div>
          <div class="mui-col-xs-3">101</div>
          <div class="mui-col-xs-3">101</div>
          <div class="mui-col-xs-3">101</div>
          <div class="mui-col-xs-3">101</div>
           <div class="mui-col-xs-3 tw-active">101</div>
          <div class="mui-col-xs-3">101</div>
          <div class="mui-col-xs-3">101</div>
          <div class="mui-col-xs-3">101</div>
          <div class="mui-col-xs-3">101</div>
          <div class="mui-col-xs-3">101</div>
        </div>
      </div>

      <div class="twfp_foot">
          <div class="twfp_foot_lf" onclick="cancleAll()">取消所有</div>
          <div class="twfp_foot_rt">提交</div>
          <div class="clear"></div>
      </div>
    </div>
    <script src="../assets/js/jquery.min.js"></script>
    <script src="../assets/js/mui.js"></script>
    <script type="text/javascript">
      $('.ctsk-items2 div').on('click',function(){
        if($(this).hasClass('tw-active')){
          $(this).removeClass('tw-active')
        }
        else{
          $(this).addClass('tw-active')
        }
      })
      $('.ctsk-items div').on('click',function(){
        if($(this).hasClass('ry-active')){
          $(this).removeClass('ry-active')
          
        }
        else{
          $(this).addClass('ry-active')
          $(this).siblings().removeClass('ry-active')
        }
      })
      function cancleAll() {
        $('.ctsk-items div').removeClass('ry-active')
        $('.ctsk-items2 div').removeClass('tw-active')
      }
    </script>
  </body>

  </html>